<template>
  <div>
    <div class="list-tab">
          <div class="tab" :class="type==1?'now':''" @click="gopidan(1)">上游结算账单</div>
          <div class="tab" :class="type==2?'now':''" @click="gopidan(2)">上游结算明细</div>
          <div class="tab" :class="type==3?'now':''"  @click="gopidan(3)">下游结算账单</div>
          <div class="tab" :class="type==4?'now':''" @click="gopidan(4)">下游结算明细</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tabList',
  data() {
    return {
    
		};
	},
	props:{    
		type: Number,
	},
	methods:{
    gopidan(type){
      console.log(type)
      switch(type)
        {
        case 1:
           this.$router.push({
            name:"upbillSettlement"
        })
          break;
        case 2:
          this.$router.push({
            name:"upbillSettlementlist"
        })
          break;
        case 3:
          this.$router.push({
            name:"downbillSettlement"
        })
          break;
        case 4:
          this.$router.push({
            name:"downbillSettlementlist"
        })
          break;

        }
      
    }
		
	}
};
</script>
<style scoped lang="scss">
  .list-tab {
        padding: 0 20px;
        box-border: border;
        border-bottom: 1px solid #cbcbcb;
        margin-bottom:30px;
        .tab {
          display: inline-block;
          padding: 0 10px;
          line-height: 40px;
          text-align: center;
          color: #333;
          cursor: pointer;
          margin-bottom: -1px;
          span {
            color: #999;
          }
        }
        .now {
          color: #ff7819 !important;
          background: url(../../assets/images/bomactive2x.png) center 32px
            no-repeat;
          span {
            color: #ff7819 !important;
          }
        }
      }
</style>